<template>
  <view class="page_wrap">
    <!-- 顶部导航 -->
    <custom-header title="花材推荐" sticky />

    <!-- 花材信息 -->
    <view class="info-card">
      <view class="card-title">花材信息</view>
      <view class="info-row">
        <text class="info-label">推荐花材</text>
        <view class="flower-info-right">
          <text class="flower-name">{{ detailData.flowerName }}</text>
          <text class="flower-grade">{{ detailData.grade }}</text>
        </view>
      </view>
      <view class="info-row">
        <text class="info-label">供应商家</text>
        <text class="info-value">{{ detailData.supplierName }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">推荐场次</text>
        <text class="info-value">{{ detailData.recommendDate }}</text>
      </view>
      <view class="info-row quality-stats">
        <text class="info-label">近7天质检</text>
        <text class="info-value stats-text">缺货：{{ detailData.stats.shortage }} 退货：{{ detailData.stats.return }} 降级：{{ detailData.stats.downgrade }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">近7天推荐次数</text>
        <text class="info-value">{{ detailData.stats.recentRecommend }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">历史推荐次数</text>
        <text class="info-value">{{ detailData.stats.historyRecommend }}</text>
      </view>
    </view>

    <!-- 本次推荐 -->
    <view class="recommendation-card">
      <view class="card-title">本次推荐</view>
      <view class="info-row">
        <text class="info-label">推荐人员</text>
        <text class="info-value">{{ detailData.recommender }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">提交时间</text>
        <text class="info-value">{{ detailData.submitTime }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">推荐理由</text>
        <text class="info-value">{{ detailData.reason }}</text>
      </view>
      <view class="certificate-section">
        <text class="info-label">推荐凭证</text>
        <view class="images-grid">
          <view class="image-item" v-for="(image, index) in detailData.images" :key="index" @click="previewImage(image, index)">
            <image :src="image" mode="aspectFill" />
          </view>
        </view>
      </view>
    </view>
    <!-- 花材审核 -->
    <view class="audit-card">
      <view class="card-title">花材审核</view>
      <view class="info-row">
        <text class="info-label">审核人员</text>
        <text class="info-value">{{ detailData.auditor }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">审核时间</text>
        <text class="info-value">{{ detailData.auditTime }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">审核状态</text>
		<text class="info-value pending"  v-if="detailData.status == 'pending'"> 待审核 </text>
		<text class="info-value approved" v-if="detailData.status == 'approved'"> 已通过 </text>
		<text class="info-value rejected" v-if="detailData.status == 'rejected'"> 已驳回 </text>
      </view>
      <view v-if="detailData.rejectReason" class="reject-reason">
        <text class="reason-label">驳回原因：</text>
        <text class="reason-text">{{ detailData.rejectReason }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

// 详情数据
const detailData = reactive({
  flowerName: '蜜桃雪山（香槟）',
  grade: 'A级',
  supplierName: '柯韦花卉1',
  recommendDate: '2025-06-16',
  stats: {
    shortage: 999,
    return: 999,
    downgrade: 999,
    recentRecommend: 999,
    historyRecommend: 999
  },
  recommender: '宁满欣',
  submitTime: '2025-06-16 20:38:19',
  reason: '花头大，枝枝均匀',
  auditor: '自动审核',
  auditTime: '2025-06-16 20:38:19',
  status: 'pending', // pending, approved, rejected
  rejectReason: '',
  images: [
    '/static/home/shop.png',
    '/static/home/shop.png',
    '/static/home/shop.png',
    '/static/home/shop.png',
    '/static/home/shop.png',
    '/static/home/shop.png',
    '/static/home/shop.png'
  ]
})

// 驳回弹窗
const showRejectModal = ref(false)
const rejectReason = ref('')

onMounted(() => {
  // 获取页面参数
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options
  
  // console.log('质检详情页面参数:', options)
  
  // // 根据传入的参数设置详情数据
  // if (options.id) {
  //   detailData.supplierName = options.id
  // }
  
  // if (options.status) {
  //   detailData.status = options.status
  // }
  
  // if (options.flowerName) {
  //   detailData.flowerName = options.flowerName
  // }
  
  // if (options.flowerSpec) {
  //   // 将规格信息拆分为花材名称和等级
  //   const specParts = options.flowerSpec.split('/')
  //   if (specParts.length > 0) {
  //     detailData.grade = specParts[0] || 'A级'
  //   }
  // }
  
  // // 根据状态设置对应的驳回原因（如果是已驳回状态）
  // if (detailData.status === 'rejected') {
  //   detailData.rejectReason = '花材新鲜度不符合要求，请重新提交符合标准的花材。'
  // }
})

// 预览图片
const previewImage = (image, index) => {
  uni.previewImage({
    urls: detailData.images,
    current: index
  })
}
</script>

<style lang="scss">
.page_wrap {
  // 信息卡片
  .info-card, .recommendation-card, .audit-card {
    background: #ffffff;
    border-radius: 20rpx;
    margin: 24rpx;
    padding: 24rpx;
    
    .card-title {
      font-size: 28rpx;
      font-weight: 600;
      color: #333333;
      margin-bottom: 24rpx;
    }
    
    .info-row {
      display: flex;
      align-items: flex-start;
      margin-bottom: 24rpx;
	  justify-content: space-between;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .info-label {
        font-size: 24rpx;
        color: #999;
        min-width: 160rpx;
        flex-shrink: 0;
      }
      
      .info-value {
        font-size: 24rpx;
        color: #555;
        flex: 1;
        text-align: right;
        
        &.stats-text {
          font-size: 26rpx;
          line-height: 1.4;
        }
      }
      
      .flower-info-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 16rpx;
        
        .flower-name {
          font-size: 28rpx;
          color: #666;
        }
        
        .flower-grade {
          font-size: 24rpx;
          color: #f5564d;
        }
      }
      
      &.quality-stats {
        align-items: flex-start;
      }
    }
    
    .certificate-section {
      margin-top: 20rpx;
      
      .info-label {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 20rpx;
        display: block;
      }
    }
    
    .images-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16rpx;
      .image-item {
        aspect-ratio: 1;
        border-radius: 8rpx;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  
  // 审核状态样式
  .audit-card {
    .info-value {
      &.pending {
        color: #FFA44A;
      }
      
      &.approved {
        color: #30C8AE;
      }
      
      &.rejected {
        color: #F5564D;
      }
    }
    
    .reject-reason {
      background: #fff2f0;
      border-radius: 12rpx;
      padding: 20rpx;
      margin-top: 20rpx;
      
      .reason-label {
        font-size: 26rpx;
        color: #f5564d;
        font-weight: 600;
      }
      
      .reason-text {
        font-size: 26rpx;
        color: #333333;
        line-height: 1.6;
      }
    }
  }

  
  // 操作按钮
  .action-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    padding: 24rpx;
    display: flex;
    gap: 30rpx;
    box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.1);
    
    .action-btn {
      flex: 1;
      height: 80rpx;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      font-weight: 600;
      
      &.reject {
        background: transparent;
        color: #f5564d;
        border: 2rpx solid #f5564d;
      }
      
      &.approve {
        background: #f5564d;
        color: #ffffff;
      }
    }
  }
  
  // 驳回弹窗
  .modal-mask {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .modal-content {
    background: #ffffff;
    border-radius: 20rpx;
    padding: 40rpx;
    margin: 0 40rpx;
    width: calc(100% - 80rpx);
    max-width: 600rpx;
  }
  
  .modal-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
    margin-bottom: 30rpx;
    text-align: center;
  }
  
  .reject-textarea {
    width: 100%;
    min-height: 200rpx;
    background: #f5f5f5;
    border-radius: 12rpx;
    padding: 20rpx;
    font-size: 28rpx;
    color: #333333;
    border: none;
    outline: none;
    margin-bottom: 30rpx;
    resize: none;
  }
  
  .modal-buttons {
    display: flex;
    gap: 30rpx;
  }
  
  .modal-btn {
    flex: 1;
    height: 80rpx;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    
    &.cancel {
      background: transparent;
      color: #f5564d;
      border: 1px solid #f5564d;
    }
    
    &.confirm {
      background: #f5564d;
      color: #ffffff;
    }
  }
}
</style> 